<template>
 <div class="history">
   <div class="chart" ref="chart">
    
       
      
 </div>

  </div>
</template>
<script>
export default {
  mounted() {
    this.$ipcRenderer.on_RamanDataResultsHistory_reply(
      (RamanDataResultsHistory) => {
        this.$nextTick().then((data) => {
             let Data = RamanDataResultsHistory.map((item) => {
         // console.log(this.transTimestamp(item["time"]));
          return {
            ...item,
            time: this.transTimestamp(item["time"], "-"),
          };
        });
        let list = Data.sort((a,b)=>{
                        //return b.id - a.id
                       return a.id - b.id
                    });
          this.drawChart(list);
        });
      }
    );

  },
  data() {
    return {
      visible: false,
      title: "",
      myChart:null,
      Canrefresh:true,
      chartBox:null
    };
  },
  methods: {
resizeChart(){
  if(this.myChart == null) return;
  console.log("🚀 ~ resizeChart ~ this.$refs.chart.clientWidth:", this.$refs.chart.clientWidth)
  console.log("🚀 ~ resizeChart ~ this.$refs.chart.clientHeight:", this.$refs.chart.clientHeight)

  
  this.$nextTick(_ => {
    this.myChart.resize({
          // 根据父容器的大小设置大小
          width: this.$refs.chart.clientWidth,
          height: this.$refs.chart.clientHeight,
        });
         

  })
},

    drawChart(Data) {
      let option = {
        xAxis: {
          //   name: "nm",
          data: Data.map((item) => item["time"]),
          maxInterval: 500,
        }, backgroundColor:"#fff",
        tooltip: {
          trigger: "axis",
         valueFormatter: (value) => Number(Number(value)*100).toFixed(2) + "%",
          textStyle: {
            align: "left",
          },
        },
        legend: {
          data: ["乙二酸二甲酯浓度"],
        },
        grid: {
          left: "6%",
          right: "3%",
          top: "8%",
          bottom: "20%",
        },

        dataZoom: [
          {
            type: "slider", //inside平移 缩放
            // throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
            minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
            start: 0, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
            end: 100, //数据窗口范围的结束百分比。范围是：0 ~ 100。
            zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
            textStyle: { color: "rgba(0,0,0,0)" },
          },
        ],
        yAxis: {
          type: "value",
          max:1,
          min:0,
          name:"%",
          axisLabel:{
   formatter: function (value, index) {
    return Number(value)*100;
}
          }
        },
        series: [
          {
            name: "乙二酸二甲酯浓度",
            symbol: "none",
            data: Data.map((item) =>
              Number(item.c_YESEJZ)
            ),
            type: "line",
            smooth: true,
          },
        ],
      };

  if (this.myChart == null) {
        this.myChart = this.$echarts.init(this.$refs.chart);
        this.myChart.setOption(option);
            let that = this;
        // 当滑动条变化时触发
        this.myChart.on("datazoom",  (params) => {
  this.$emit('stopRefresh');
         
        });

        
        return;
      }

      this.myChart.setOption(option, true); //true重绘
      // this.myChart = this.$echarts.init(this.$refs.chart);
      // this.myChart.setOption(option);
      // return;
    },

        transTimestamp(datetime, dateSeprator = "/", timeSeprator = ":") {
      if (datetime) {
        const date = new Date(datetime);
        const year = `${date.getUTCFullYear()}`;
        let month = `${date.getUTCMonth() + 1}`;
        let day = `${date.getUTCDate()}`;
        let hour = `${date.getUTCHours()}`;
        let minute = `${date.getUTCMinutes()}`;
        let second = `${date.getUTCSeconds()}`;
        if (month.length === 1) {
          month = `0${month}`;
        }
        if (day.length === 1) {
          day = `0${day}`;
        }
        if (day.length === 1) {
          day = `0${day}`;
        }
        if (hour.length === 1) {
          hour = `0${hour}`;
        }
        if (minute.length === 1) {
          minute = `0${minute}`;
        }
        if (second.length === 1) {
          second = `0${second}`;
        }
        return `${year}${dateSeprator}${month}${dateSeprator}${day} ${hour}${timeSeprator}${minute}${timeSeprator}${second}`;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.history{
  height: 100%;
  width: 100%;

}

.chart {
  height: 100%;
    width: 100%;
     background-color: #fff;
}
</style>
